<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>叮当图书网 - 查看购物车</title>
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
        }

        tr:nth-of-type(even) {
            background-color: #f7fbff;
        }

        tr:nth-of-type(odd) {
            background-color: #ebf5ff;
        }

        th {
            background-color: #d1ecff;
            padding: 10px;
            border-top: 1px solid #d1ecff;
            border-bottom: 1px solid #d1ecff;
            border-right: 1px solid #fff;
        }

        th:last-child {
            border-right: none;
        }

        td {
            padding: 10px;
            border-top: 1px solid #d1ecff;
            border-bottom: 1px solid #d1ecff;
            border-right: 1px solid #fff;
        }

        /* 图片样式 */
        td img {
            width: 80px;
            height: auto;
            border-radius: 4px;
        }

        /* 数量输入框 */
        input[type="number"] {
            width: 50px;
            height: 30px;
            text-align: center;
            font-size: 14px;
        }

        .qty-control {
            cursor: pointer;
            padding: 4px 10px;
            border: 1px solid #ccc;
            margin: 0 5px;
            user-select: none;
            background-color: #f2f2f2;
            border-radius: 3px;
        }

        /* 链接样式 */
        a {
            text-decoration: none;
            color: #3366cc;
        }

        a:hover {
            color: red;
        }

        /* 按钮样式 */
        input[type="submit"] {
            width: 120px;
            height: 40px;
            background-color: red;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }

        input[type="submit"]:hover {
            background-color: yellow;
            color: black;
        }

        /* 页面布局 */
        .cart-header, .cart-footer {
            margin: 20px;
            font-size: 16px;
        }

        .cart-footer {
            text-align: right;
        }
    </style>
</head>
<body>

<div class="cart-header">
    您的位置：
    <a href="ex2.html">首页</a> > 我的购物车
</div>

<form>
    <table>
        <tr>
            <th><input type="checkbox" name="selectAll"> 全选</th>
            <th>书籍名称</th>
            <th>单价（元）</th>
            <th>数量</th>
            <th>小计（元）</th>
            <th>操作</th>
        </tr>

        <!-- 第一本书 -->
        <tr>
            <td><input type="checkbox" name="book1"></td>
            <td>
                <img src="java.jpg" alt="书籍封面"><br>
                <a href="#">零基础学设计从自学入门到职场进阶</a>
            </td>
            <td class="price">52.7</td>
            <td>
                <span class="qty-control" onclick="changeQty(this, -1)">-</span>
                <input type="number" value="1" min="1" onchange="updateTotals()">
                <span class="qty-control" onclick="changeQty(this, 1)">+</span>
            </td>
            <td class="subtotal">52.7</td>
            <td><a href="#">删除</a></td>
        </tr>

        <!-- 第二本书 -->
        <tr>
            <td><input type="checkbox" name="book2"></td>
            <td>
                <img src="jsp.jpg" alt="书籍封面"><br>
                <a href="#">JSP & Servlet学习笔记</a>
            </td>
            <td class="price">40.0</td>
            <td>
                <span class="qty-control" onclick="changeQty(this, -1)">-</span>
                <input type="number" value="1" min="1" onchange="updateTotals()">
                <span class="qty-control" onclick="changeQty(this, 1)">+</span>
            </td>
            <td class="subtotal">40.0</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>

    <!-- 批量删除按钮 -->
    <div class="cart-header">
        <input type="submit" value="批量删除">
    </div>

    <!-- 总价与购买按钮 -->
    <div class="cart-footer">
        商品总价（不含运费）：<strong id="total">92.7元</strong>
        <input type="submit" value="立刻购买">
    </div>
</form>

<script>
    function changeQty(btn, delta) {
        const input = btn.parentElement.querySelector('input[type="number"]');
        let qty = parseInt(input.value);
        qty = Math.max(1, qty + delta);
        input.value = qty;
        updateTotals();
    }

    function updateTotals() {
        let total = 0;
        const rows = document.querySelectorAll("table tr");

        rows.forEach(row => {
            const priceCell = row.querySelector(".price");
            const qtyInput = row.querySelector('input[type="number"]');
            const subtotalCell = row.querySelector(".subtotal");

            if (priceCell && qtyInput && subtotalCell) {
                const price = parseFloat(priceCell.textContent);
                const qty = parseInt(qtyInput.value);
                const subtotal = (price * qty).toFixed(2);
                subtotalCell.textContent = subtotal;
                total += parseFloat(subtotal);
            }
        });

        document.getElementById("total").textContent = total.toFixed(2) + "元";
    }
</script>

</body>
</html>
